<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据表格</title>
<link href="../../css/bootstrap3.css" rel="stylesheet">
<!-- <link href="../../css/font-awesome.css" rel="stylesheet"> -->
<link href="../../css/koala.css" rel="stylesheet">
<script src="../../js/jquery.js" type="text/javascript"></script>
<script src="../../js/bootstrap3.min.js" type="text/javascript" ></script>
<script src="../../lib/Koala_Grid.js" type="text/javascript" ></script>
<script src="../../lib/Koala_Select.js" type="text/javascript" ></script>
<script src="../../common/data.js" type="text/javascript" ></script>
<style>
	body {
		margin: 20px;	
	}
</style>
<script>

	$(function(){
		
		var buttons = [
				{content: '<button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-plus"><span>创建</button>', action: 'add'},
	            {content: '<button class="btn btn-success" type="button"><span class="glyphicon glyphicon-edit"></span>&nbsp;修改</button>', action: 'modify'},
	            {content: '<button class="btn btn-danger" type="button"><span class="glyphicon glyphicon-remove"></span>&nbsp;删除</button>', action: 'delete'}
	            ];
		
		$("#myGrid").grid({
			 identity: 'id',
             columns: columns,
             buttons: buttons,
             querys: [{title: '角色名称', value: 'name'},{title: '角色描述', value: 'roleDesc'}],
             isUserLocalData:true,			//如果为false，则发送ajax请求到url端，获取数据，否则，则视为获取静态数据
             url:"../../common/data.js",
             localData:staticData
             ,isShowIndexCol:true
             //,lockWidth: true
        }).on({
        	
        	'add': function(){
        		alert("add action");
        	},
        	'modify': function(event, data){
				alert("modify action");
        	},
        	'delete': function(event, data){
	            alert('delete action');
        	}
        });
		
	})
</script>
</head>
<body>
<div id="myGrid"></div>
</body>
</html>